<template>
	<view class="positive">
		<view class="order-list">
			<view class="order-item">
				<view class="order-header">
					<text>订单编号：{{item.orderNum }}</text>
					<text class="product-status">{{ item.productStatus }}</text>
				</view>
				<view class="order-content">
					<image class="product-image" :src="`/static/${item.img}`" mode="aspectFit"></image>
					<view class="product-details">
						<view>
							<text class="product-name">【{{ item.name }}】</text>
							<text class="product-information">{{ item.productInformation }}</text>
						</view>
						<text class="product-logistics">物流信息: {{ item.logistics || '暂无' }}</text>
						<text class="product-price">实付:¥{{item.price}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="submitReview">
			<view class="submitReview-text">
				<text style="color: #f96a08;margin-right: 5rpx;font-weight: 1000;font-size:30rpx;">丨</text>
				<text>写评价</text>
			</view>
			<u--textarea class="textarea" style="border:none;border-top: 1px #ccc solid;margin-top: 12rpx;"
				v-model="value1" height='100' placeholder="在此编辑,发表你的评价." :maxlength="200" count></u--textarea>
		</view>
		<view class="handleChooseImage">
			<view class="handleChooseImage-my">
				<u-upload :action="action" :max-count="3" accept="image/*,video/*" @on-oversize="handleOversize"
					@on-success="handleSuccess" @on-error="handleError" @on-remove="handleRemove">
					<view class="upload-button">
						<u-icon name="camera-fill" size="40" color="#fd6303"></u-icon>
						<text class="upload-text">上传图片或视频</text>
					</view>
				</u-upload>
			</view>
			<button class="submit" type="submit">发布评价</button>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(options) {
			// 接收传递过来的订单字符串，并解析为对象
			if (options.item) {
				this.item = JSON.parse(decodeURIComponent(options.item));
				console.log(this.item);
			}
		},
		data() {
			return {
				item: {}, // 初始化 item
				value1: '', //评价内容
				// 上传的URL地址
				action: 'your-upload-url',
			};
		},
		methods: {
			submitReview() {
				// 提交评价的逻辑
				console.log('提交评价:', this.reviewContent);
			},
			// 文件超出个数限制时触发
			handleOversize(file) {
				uni.showToast({
					title: '最多只能上传3个文件',
					icon: 'none'
				});
			},
			// 上传成功
			handleSuccess(data, index, lists, name) {
				console.log('上传成功');
				// 这里可以进行后续处理，例如保存文件信息等
			},
			// 上传失败
			handleError(err, index, lists, name) {
				console.error('上传失败', err);
				uni.showToast({
					title: '上传失败',
					icon: 'none'
				});
			},
			// 移除文件
			handleRemove(index, lists) {
				console.log('移除文件');
				// 这里可以进行后续处理，例如更新文件列表等
			}
		},
	}
</script>

<style>
	.positive {
		width: 90%;
		margin: auto;
	}

	.order-list,
	.handleChooseImage,
	.submitReview {
		margin-top: 30rpx;
		width: 100%;
	}

	.order-item {
		margin-bottom: 10px;
		background-color: #ffffff;
		padding: 30rpx;
	}

	.order-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.order-content {
		display: flex;
		padding-bottom: 20rpx;
	}

	.product-image {
		width: 110rpx;
		height: 110rpx;
		margin-right: 10px;
	}

	.product-details {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.product-name,
	.product-information{
	font-size: 28rpx;
	font-weight: bold;
	margin-bottom: 10rpx;
	}

	.product-logistics,
	.product-price {
		font-size: 24rpx;
		margin-top: 20rpx;
	}

	.product-price {
		color: #ff0000;
	}

	.order-footer {
		display: flex;
		margin-top: 20rpx;
		flex-direction: row;
		justify-content: space-between;
	}

	.product-time {
		font-size: 24rpx;
		color: #666;
	}

	.submitReview-text {
		width: 100%	;
		font-weight: 550;
		margin-bottom: 10rpx;
	}

	.handleChooseImage-my {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
	}

	.upload-button {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #f2f2f2;
		padding: 40rpx 20rpx;
	}

	.upload-text {
		color: #fd6303;
		font-size: 26rpx;
	}

	.submit {
		width: 320rpx;
		background-color: #fd6303;
		border: none;
		color: #eee;
		position: absolute;
		bottom: 100rpx;
		left: 1100rpx;
	}

	/* #ifdef MP-WEIXIN */
	.submit {
		position: absolute;
		    bottom: 160rpx;
		    left: 217rpx;
	}

	.handleChooseImage-my {
		margin-top: 160rpx;
	}
	/* #endif */
</style>